<template lang="">
    <div class="edit-user">
    <div class="edit-user__nav">
        <van-nav-bar  title="编辑资料" left-arrow  @click-left="$router.replace('/layout/user')"></van-nav-bar>
    </div>
    <div class="edit-user__info">
        <van-cell-group>
            <van-cell title="头像"
            @click="editPhoto">
                <template #default>
                    <van-image
                    width="70"
                    height="70"
                    round
                    :src="profileObj.photo"
                    />
                </template>
            </van-cell>
            <!-- 使用表单的形式，accpet表示文件上传的类型 -->
            <input
             type="file"
             v-show="false"
             ref="iptfile"
             accept="image/*"
             @change="onChangeFile"
             />
            <van-cell title="用户名" :value="profileObj.name" @click="editOtherInfo(profileObj.name,1)" />
            <van-cell title="生日" :value="profileObj.birthday" @click="editBirthday"/>
            <van-cell title="性别" :value="genderString"     @click="editOtherInfo(genderString,3)" />
        </van-cell-group>
        <van-dialog v-model="show" title="编辑" show-cancel-button @confirm="commitEdit">
          <input type="text" class="edit-user__info--edit" v-focus v-model="infoContent"/>
        </van-dialog>
        <van-popup
          v-model="pickerShow"
          position="bottom"
        >
        <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmFn"
      />
      </van-popup>
    </div>
    </div>
</template>
<script>
import { Notify } from 'vant'
import { formatTime } from '@/utils/date'
export default {
  name: 'EditUser',
  data () {
    return {
      profileObj: {},
      show: false,
      pickerShow: false,
      infoContent: '',
      flag: 0,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17)
    }
  },
  computed: {
    genderString () {
      return this.profileObj.gender === 1 ? '男' : '女'
    }
  },
  methods: {
    async onChangeFile (e) {
      try {
        // 得到选中的图片
      //   创建formdata对象
        // 对用户的选择进行一个判断
        if (e.target.files[0].length === 0) return
        const fd = new FormData()
        fd.append('photo', e.target.files[0])
        const res = await this.$API.reqUpdatedPhoto(fd)
        this.profileObj.photo = res.data.data.photo
      } catch (error) {
        console.log(error)
      }
    },
    editPhoto () {
    // 通过点击图片来出发input的事件，来上传图片文件
      const ipt = this.$refs.iptfile
      ipt.click()
    },
    editOtherInfo (info, num) {
      this.show = true
      this.infoContent = info
      this.flag = num
    },
    async  editBirthday () {
      this.pickerShow = true
      this.currentDate = new Date(this.profileObj.birthday)
    },
    async  commitEdit () {
      try {
        switch (this.flag) {
          case 1: {
            const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
            console.log(reg.test(this.infoContent))
            if (reg.test(this.infoContent)) {
              this.profileObj.name = this.infoContent
              await this.$API.reqEditUserInfo({ uerName: this.profileObj.name })
            } else {
              Notify({ type: 'danger', message: '中文或英文' })
            }
            break
          }
          // case 2: {
          //   this.profileObj.birthday = this.infoContent
          //   const res = await this.$API.reqEditUserInfo({ birthday: this.profileObj.birthday })
          //   console.log(res)
          // }
        }
      } catch (error) {

      }
    },
    async confirmFn () {
      try {
        await this.$API.reqEditUserInfo({ birthday: formatTime(this.currentDate) })
        this.profileObj.birthday = formatTime(this.currentDate)
        this.pickerShow = false
      } catch (error) {
      }
    }
  },
  async created () {
    try {
      const res = await this.$API.reqUserEdtiInfo()
      console.log(res)
      this.profileObj = res.data.data
    } catch (error) {
      console.log(error)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-cell{
    align-items: center;
    padding: 5px 20px 5px 8px;
}
.edit-user__info--edit{
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}
</style>
